
<template>
  <div class="userInfo-main">
    <ul v-if="user" class="userInfo-main-ul">
      <li>
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/rentou1.png" alt="" title=""/>
						</span>
            <span>用户手机号</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right">
            {{user.mobile}}
          </div>
        </div>
      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/id.png" alt="" title=""/>
						</span>
            <span>精灵盒子ID</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right">
            {{user.id}}
          </div>
        </div>
      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/huangguan.png" alt="" title=""/>
						</span>
            <span>金手指会员类型</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right">
            普通会员
          </div>
        </div>
      </li>
      <li>
        <router-link :to="{name:'restPassword'}">
          <div class="userInfo-box">
            <!-- left -->
            <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/suo.png" alt="" title=""/>
						</span>
              <span>用户密码</span>
            </div>
            <!-- right -->
            <div class="userInfo-main-right">
              修改 &nbsp;>
            </div>
          </div>
        </router-link>
      </li>
      <li class="user-top"></li>
      <li>
        <router-link :to="{name:'bindId'}" >
          <div class="userInfo-box">
            <!-- left -->
            <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/shenfenzheng.png" alt="" title=""/>
						</span>
              <span class="user-must">
							<a>身份证</a>
							<a>(必填)</a>
						</span>
            </div>
            <!-- right -->

            <div class="userInfo-main-right" :style="{color:color(user.approveState)}">

              {{status[user.approveState]}} >

            </div>

          </div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'bindBank'}">
          <div class="userInfo-box">
            <!-- left -->
            <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/yinhangka.png" alt="" title=""/>
						</span>
              <span class="user-must">
							<a>银行卡</a>
							<a>(必填)</a>
						</span>
            </div>
            <!-- right -->

            <div class="userInfo-main-right" :style="{color:color(user.bankcardState)}">
              {{status[user.bankcardState]}} &nbsp;>
            </div>

          </div>
        </router-link>
      </li>
      <li class="user-top"></li>
      <li>
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/QQ1.png" alt="" title=""/>
						</span>
            <span>QQ</span>
          </div>
          <!-- right -->

          <div class="userInfo-main-right" :style="{color:color(user.qqApprove)}">
            {{status[user.qqApprove]}} &nbsp;>
          </div>


        </div>
      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/mjx2.png" alt="" title=""/>
						</span>
            <span>买家秀信息</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right" style="color:red">
            未绑定 &nbsp;>
          </div>
        </div>
      </li>
      <li>
        <router-link :to="{name:'bindJD'}">
          <div class="userInfo-box">
            <!-- left -->
            <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/jingdongLogo.png" alt="" title=""/>
						</span>
              <span class="user-must">
							<a>京东账号</a>
							<a>(必填)</a>
						</span>
            </div>
            <!-- right -->
            <div class="userInfo-main-right" :style="{color:color(abort(user.jingdongList))}">
              {{status[abort(user.jingdongList)]}} &nbsp;>
            </div>
          </div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'bindTB'}">
          <div class="userInfo-box">
            <!-- left -->
            <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/taobao.png" alt="" title=""/>
						</span>
              <span class="user-must">
							<a>淘宝账号</a>
							<a>(必填)</a>
						</span>
            </div>
            <!-- right -->
            <div class="userInfo-main-right" :style="{color:color(abort(user.taobaoList))}">
              {{status[abort(user.taobaoList)]}} &nbsp;>
            </div>
          </div>
        </router-link>

      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/pingduoduo.png" alt="" title=""/>
						</span>
            <span>拼多多账号</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right" style="color: red;">
            未绑定 &nbsp;>
          </div>
        </div>
      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/mogu.png" alt="" title=""/>
						</span>
            <span>蘑菇街账号</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right" style="color: red;">
            未绑定 &nbsp;>
          </div>
        </div>
      </li>
      <li v-if="false">
        <div class="userInfo-box">
          <!-- left -->
          <div class="userInfo-main-left">
						<span>
							<img src="static/imgs/hua.png" alt="" title=""/>
						</span>
            <span>美丽说账号</span>
          </div>
          <!-- right -->
          <div class="userInfo-main-right" style="color: red;">
            敬请期待 &nbsp;>
          </div>
        </div>
      </li>
    </ul>
    <!-- 退出btn -->
    <div class="backLogin" @click="loginOut">退出登录</div>
    <index-footer></index-footer>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import {userService,baseService} from '#/service'
  import IndexFooter from '@/components/base/IndexFooter'
  export default {
    name: 'userInfo',
    data(){
      return {
        status:{
          '-1':'未绑定',
          '0':'待审核',
          '1':'已绑定',
          '2':'审核未通过'
        }
      }
    },
    created(){
      userService.personInfo({
        success:(res)=>{
          if(res.code===0){
            this.saveUserInfo(res.data)
          }
        }
      })
    },
    methods:{
      ...mapActions([
        'saveUserInfo'
      ]),
      abort(arr){
        //未绑定
        if(arr.length<1) return -1
        for(let i=0;i<arr.length;i++){
          if(arr[i].approve!==1){
            return arr[i].approve
          }
        }
        return 1
      },
      color(status){

        if(status===1){
          return '#4097FF'
        }
        return 'red'
      },
      async loginOut(){
        await baseService.exist({
          success:()=>{
            this.$router.push({
              name:'login'
            })
            setTimeout(()=>{
              this.saveUserInfo(null);
            },300)
          }
        })


      }
    },
    computed:{
      ...mapGetters([
        'user'
      ]),
    },
    components:{
      IndexFooter
    }
  }
</script>

<style>
  html,body{
    background: #f5f5f5;
  }
  .userInfo-main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-top: 0.1rem;
  }
  .userInfo-main .userInfo-main-ul li{
    width: 100%;
    height: 0.42rem;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .userInfo-main ul .user-top{
    margin-top: 0.05rem;
    height: 0;
  }
  .userInfo-box{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .userInfo-main-left{
    float:left;
  }
  .userInfo-main-left span{
    display: block;
    float: left;
    margin-right: 0.1rem;
    color: #333;
    font-size: 0.14rem;
    line-height: 0.4rem;
  }
  .userInfo-main-left .user-must a{
    display: inline-block;
    float: left;
  }
  .userInfo-main-left .user-must a:last-child{
    color: #4097ff;
  }
  .userInfo-main-left span:first-child{
    width: 0.24rem;
    height: 0.24rem;
    margin-top: 0.08rem;
  }
  .userInfo-main-left span:first-child img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .userInfo-main-left span:last-child{
    margin-right: inherit;
  }
  .userInfo-main-right{
    float: right;
    color: #b2b6b7;
    font-size: 0.12rem;
    line-height: 0.4rem;
  }
  .backLogin{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    background: white;
    font-size: 0.12rem;
    text-align: center;
    color: #4097ff;
    margin-top: 0.05rem;
  }
</style>
